<template>
  <div class="right-bar">
    <ul class="bar-items">
      <li v-for="(item, index) in rightbars" :key="index" class="bar-item"
          :class="{ 'hidden-item': item.icon === 'icon-fanhuidingbu' && !showBackToTop }">
        <div class="icon-container">
          <i :class="item.icon" class="iconfont"
             @click="handleItemClick(item)"></i>
          <!-- 只有登录状态下才显示数量标记 -->
          <span class="badge" v-if="authStore.isLoggedIn &&
            ((item.count && item.count > 0) ||
              (item.icon === 'icon-gouwuche' && cartStore.totalCount > 0))">
            {{ item.icon === 'icon-gouwuche' ? cartStore.totalCount : item.count }}
          </span>
        </div>
         <!-- 为回顶部文字单独添加类名 -->
        <span :class="{ 'back-to-top-text': item.icon === 'icon-fanhuidingbu' }">
          {{ item.text }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import router from '@/router';
import { useAuthStore } from '@/stores/auth';
import { useCartStore } from '@/stores/cart';
// import setupScrollAwareTooltip from '@/utils/scrollTooltip';

const cartStore = useCartStore();
const authStore = useAuthStore();
const showBackToTop = ref(false);
let scrollController = null;

const rightbars = [
  { icon: 'icon-gouwuche', text: '购物车', count: 0, path: '/cart' },
  { icon: 'icon-wode', text: '我的', count: 0, path: '/user' },
  { icon: 'icon-kefu', text: '客服', count: 0, path: '/service' },
  { icon: 'icon-fankui', text: '反馈', count: 0, path: '/feedback' },
  { icon: 'icon-fanhuidingbu', text: '回顶部', count: 0, path: null }
];

// 处理菜单项点击
const handleItemClick = (item) => {
  if (item.icon === 'icon-fanhuidingbu') {
    // 回顶部逻辑
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // 平滑滚动
    });
  } else if (item.path) {
    // 路由跳转
    router.push(item.path);
  }
};

// 监听滚动显示/隐藏回顶部按钮
const handleScroll = () => {
  const scrollY = window.scrollY || window.pageYOffset;
  // 当滚动距离超过视口高度时显示回顶部按钮
  showBackToTop.value = scrollY > window.innerHeight;
};

onMounted(() => {
  // 初始检查
  handleScroll();
  // 监听滚动事件
  window.addEventListener('scroll', handleScroll);

  // 如果你仍然需要使用提供的工具函数，可以这样做
  // scrollController = setupScrollAwareTooltip('some-element-id', 100);
});

onUnmounted(() => {
  // 移除滚动监听
  window.removeEventListener('scroll', handleScroll);

  // 清理控制器（如果使用了）
  if (scrollController) {
    scrollController.destroy();
  }
});
</script>

<style scoped lang="scss">
.right-bar {
  width: 50px;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgb(255, 255, 255);
  border: 1px solid #eaeaea;
  border-radius: 8px 0 0 8px;
  z-index: 100;

  .bar-items {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .bar-item {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px 0;
    border-radius: 5px;

    &:hover {
      background-color: rgb(255, 15, 35);
      color: white;
    }

    &:not(:last-child) {
      border-bottom: 1px solid #eaeaea;
    }

    .icon-container {
      position: relative; // 相对定位，用于badge的绝对定位
      display: inline-block;

      i {
        font-size: 20px;
        display: block;
        color: #666;
      }

      // 数字标记样式
      .badge {
        position: absolute;
        top: -5px;
        right: -10px;
        background-color: #ff4d4f; // 红色背景
        color: white;
        font-size: 12px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }
    }

    span {
      font-size: 12px;
      color: #333;
      display: block;
      margin-top: 5px;
    }
  // 回顶部文字单独设置红色
    .back-to-top-text {
      color: #ff0000;
    }
    &:hover i,
    &:hover span {
      color: white;
    }
  }

  // 隐藏回顶部按钮的样式
  .hidden-item {
    display: none;
  }
}
</style>
